<template>
  <div class="slider">
    <el-row>
      <el-slider v-model="value"></el-slider>
    </el-row>

    <!-- 隐藏文本提示 -->
    <el-row>
      <el-slider v-model="value2" :show-tooltip="false"></el-slider>
    </el-row>

    <!-- 自定义格式化 -->
    <el-row>
      <el-slider v-model="value3" :format-tooltip="formatTooltip"></el-slider>
    </el-row>

    <!-- :step实现离散效果 -->
    <el-row>
      <el-slider v-model="value4" :step="10"></el-slider><!-- 每次拖动加10 -->
    </el-row>

    <!-- show-stops实现断点效果 -->
    <el-row>
      <el-slider v-model="value5" :step="10" show-stops ></el-slider>
    </el-row>

    <!-- show-input可自带输入框 -->
    <el-row>
      <el-slider v-model="value6" show-input ></el-slider>
    </el-row>

    <!-- range实现范围选择 -->
    <el-row>
      <el-slider v-model="value7" range :min="1" :max="50"></el-slider>
    </el-row>

  </div>
</template>

<script>
  export default {
    name: "Slider",
    data() {
      return {
        value: 0,
        value2: 20,
        value3: 30,
        value4: 35,
        value5: 40,
        value6: 10,
        value7: [12,35]
        
      }
    },
    methods: {
      formatTooltip(value) {
        return value / 100
      }
    },
  }
</script>

<style scope>

</style>